<template>
  <div class="page-explain">
    <p class="title">
      <span v-for="item in title" :key="item">{{item}}</span>
    </p>
    <div class="solution">
      <div class="solution-theme">
        <h4>{{theme.title}}</h4>
        <h5>
          <span v-for="item in theme.descrips" :key="item"> {{item}}</span>
        </h5>
      </div>
      <div class="solution-content">
        <p>{{content}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Solution',
    props: {
      titles: Array,
      theme: Object,
      content: String
    },
    data() {
      return {};
    },
    computed: {
      title() {
        return this.titles.map(title => {
          return title.split('').join(' ');
        });
      }
    }
  };
</script>

<style lang="less">
  .page-explain {
    padding-bottom: 40px;
    .title {
      padding-top: 80px;
      padding-bottom: 80px;
      font-size: 30px;
      color: #FFB124;
      span {
        color: inherit;
        &:not(:first-child) {
          margin-left: 20px;
        }
      }
    }

    .solution {
      display: flex;
      .solution-theme {
        flex: 0.78;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-right: 60px;
        h4 {
          display: inline-block;
          padding: 10px 40px;
          width: 226px;
          border: 1px solid #FFB224;
          text-align: center;
          margin-bottom: 20px;
        }

        h5 {
          display: inline-block;
          font-size: 14px;
          width: 226px;
          text-align: center;

          span {
            display: block;
          }
        }
      }
      .solution-content {
        flex: 1;
        text-align: left;
        p {
          width: 416px;
          line-height: 1.8;
          font-size: 13px;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .page-explain {
      padding-bottom: 40px;
      .title {
        padding-top: 40px;
        padding-bottom: 40px;
        font-size: 1rem;
        color: #FFB124;
        span {
          color: inherit;
          &:not(:first-child) {
            margin-left: 15px;
          }
        }
      }

      .solution {
        display: flex;
        flex-direction: column;
        .solution-theme {
          flex: 0.78;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: unset;
          h4 {
            display: inline-block;
            padding: 10px 40px;
            width: 226px;
            border: 1px solid #FFB224;
            text-align: center;
            margin-bottom: 10px;
          }

          h5 {
            display: inline-block;
            font-size: 14px;
            width: 226px;
            text-align: center;
            margin-bottom: 10px;

            span {
              display: block;
            }
          }
        }
        .solution-content {
          flex: 1;
          text-align: left;
          p {
            width: 100%;
            padding: 0 10px;
            line-height: 1.8;
            font-size: 13px;
          }
        }
      }
    }

  }
</style>
